<!DOCTYPE html>
<html>
<head>
<title>Social Media Monitoring Extension Options</title>
<link rel="shortcut icon" HREF="img/icon_16.png">
<link rel="stylesheet" type="text/css" href="css/options.css">
<style type="text/css">
	@import url("http://www.google.com/uds/css/gsearch.css");
	@import	url("http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css");
</style>
<script type="text/javascript" src="lib/i18n.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAATfHumDbW3OmRByfquHd3SRTRERdeAiwZ9EeJWta3L_JZVS0bOBRQeZgr4K0xyVKzUdnnuFl8X9PX0w&sensor=false"></script>
<script type="text/javascript" src="lib/geo_search.js"></script>

<script type="text/javascript" src="lib/3rdparty/jquery-1.4.2.min.js"></script>

<script type="text/javascript"> 
var bkg = chrome.extension.getBackgroundPage();
var map;

//Saves options to localStorage.
function save_options() {
	bkg.settings.pollInterval = parseInt($('#refresh-interval').val()) * 60000;
	bkg.settings.timeout = 1000 * 15;

	bkg.settings.soundAlert = $('#sound-alert').val();
	

	var options_global_threshold_ratio = $('#options_global_threshold_ratio').val();
	
	bkg.settings.hideProbeLabels = $('#options_hide_probe_labels').attr('checked');
	bkg.settings.thresholdRatio = parseFloat(options_global_threshold_ratio.replace(",","."));

	console.log($('#options_hide_probe_labels').attr('checked'));
	console.log(parseFloat($('#options_global_threshold_ratio').val()));
	
	
	if($("#default_location_off").attr("checked")){
		bkg.settings.latitude = undefined;
		bkg.settings.longitude = undefined;
		bkg.settings.radius  = undefined;
	}else{
		bkg.settings.latitude = $("#lat").html();
		bkg.settings.longitude  = $("#lng").html();
		bkg.settings.radius  = $("#distance").val();
	}
	
	
	refresh_extension();

	$('#save_status').fadeIn('fast');
	$('#save_status').fadeOut(3000);
}

//Refresh the extension by reseting timer.
function refresh_extension() {
	bkg.refresh(); 
}


function playSound(){
	var urlSound = $('#sound-alert').val();

	  /*
	   * BUG: http://code.google.com/p/chromium/issues/detail?id=25972
	   */

	if(urlSound){
		pingSound = document.createElement('audio');
	    pingSound.setAttribute('src', urlSound);
	    pingSound.setAttribute('id', 'ping');
	    pingSound.load();
	    pingSound.play();
	}
}

function success(position) {
	  var s = document.querySelector('#status');
	  
	  if (s.className == 'success') {
	    // not sure why we're hitting this twice in FF, I think it's to do with a cached result coming back    
	    return;
	  }
	  
	  s.innerHTML = "found you!";
	  s.className = 'success';
	  
	  map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));


}

function error(msg) {
	  var s = document.querySelector('#status');
	  s.innerHTML = typeof msg == 'string' ? msg : "failed";
	  s.className = 'fail';
	  
	  // console.log(arguments);
}

/*
 * populate options interface 
 */
 var strSearch = chrome.i18n.getMessage('search_location');
//Restores select box state to saved value from localStorage.
 $(function() {
	 /*
	  *
	  */
	  
	 $('#location').val(strSearch);
	  
	 $('#find_me').click(function() {
		 if (navigator.geolocation) {
			  navigator.geolocation.getCurrentPosition(success, error);
			} else {
			  error('not supported');
			}
	});
 	 
	 $('#refresh-interval').val(bkg.settings.pollInterval / 60000);
	 $('#sound-alert').val(bkg.settings.soundAlert);

	 $("#lat").html(bkg.settings.latitude);
	 $("#lng").html(bkg.settings.longitude);
	 $("#distance").val(bkg.settings.radius);

	 $("#options_global_threshold_ratio").val(bkg.settings.thresholdRatio);

	 if(bkg.settings.hideProbeLabels == "true"){
	 	$("#options_hide_probe_labels").attr("checked", "true" );
	 }
	 if(bkg.settings.latitude == undefined || bkg.settings.latitude == 'undefined'){
		 $("#default_location_off").attr("checked", true);
		 $("div#geo_options").addClass('hd');
		 map = initMapSearch();
	 }else{
		 $("#default_location_on").attr("checked", true);
		 $("div#geo_options").removeClass('hd');
		 map = initMapSearch(bkg.settings.latitude, bkg.settings.longitude,function(){
			 markDirty()
		 });
	 }
	 

	 
		 
	 /*
	  * set  internationalized values
	  */

	  $("input[name='defaut_location']").change(function(){
		  console.log($("input[name='defaut_location']").val());
		  if ($("input[name='defaut_location']:checked").val() == '1'){
			  $("div#geo_options").slideDown("fast");
			  markDirty();
		  }else{
			  $("div#geo_options").slideUp("fast");
			  markDirty();
	     }
	  });
	  

	 
 });
function searchAddress(adress){
	showAddress(adress,function(){markDirty()});
}
</script>

</head>
<body onload="_initOptionsPage();" onunload="GUnload();">

<div id="content">

<div id="header">
<h1><script type="text/javascript">_writeMessage('options_header_title');</script></h1>
</div>

<div id="title_description" class="section-header first"><script type="text/javascript">_writeMessage('description_title');</script></div>
<script type="text/javascript">_writeMessage('description_body');</script>
<div id="title_options" class="section-header first"><script type="text/javascript">_writeMessage('options_title');</script></div>

<div class="option_row">
<div class="option_name"><script type="text/javascript">_writeMessage('options_default_geolocation_title');</script></div>
<div class="option_picker">
<input type="radio" id="default_location_off" name="defaut_location" value="0" checked="checked" />
<label for="default_location_off"><script type="text/javascript">_writeMessage('options_geolocation_anywhere');</script></label>
<input type="radio" id="default_location_on" name="defaut_location" value="1" />
<label for="default_location_on"><script type="text/javascript">_writeMessage('options_geolocation_userdefined');</script></label>
<div id="geo_options" class="hd">

<div id="geolocform">
<form action="javascript:void(0);" onsubmit="searchAddress(this.location.value); return false;">
	<input id="location" type="text" name="location" value="" onfocus="if(this.value==strSearch){this.value='';}"> <select id="distance" name="distance">
	<option value="10">10</option>
	<option value="20">20</option>
	<option value="30">30</option>
	<option value="40">40</option>
	<option value="50">50</option>
	<option value="60">60</option>
	<option value="70">70</option>
	<option value="80">80</option>
	<option value="90">90</option>
	<option value="100">100</option>
	<option value="200">200</option>
</select> <select id="unit" name="unit">
	<option value="km"><script type="text/javascript">_writeMessage('kilometres');</script></option>
	<!--  <option value="mi">miles</option>-->
</select> <br>
</form>
</div>

<div id="map_canvas"></div>

<span id="lat"></span>
<span id="lng"></span>
<button id="find_me"><script type="text/javascript">_writeMessage('button_findme');</script></button>
<span id="status" class="hd"><script type="text/javascript">_writeMessage('status_checking');</script></span></div>

</div>
</div>

<div class="option_row">
<div class="option_name"><script type="text/javascript">_writeMessage('options_update_frequency_title');</script></div>
<div class="option_picker"><select id="refresh-interval"
	name="refresh" onchange="markDirty()">
	<option value="1"><script type="text/javascript">_writeMessage('minutes',"1");</script></option>
	<option value="5"><script type="text/javascript">_writeMessage('minutes',"5");</script></option>
	<option value="10"><script type="text/javascript">_writeMessage('minutes',"10");</script></option>
	<option value="15"><script type="text/javascript">_writeMessage('minutes',"15");</script></option>
	<option value="20"><script type="text/javascript">_writeMessage('minutes',"20");</script></option>
	<option value="25"><script type="text/javascript">_writeMessage('minutes',"25");</script></option>
	<option value="30" selected="selected"><script type="text/javascript">_writeMessage('minutes',"30");</script></option>
	<option value="60"><script type="text/javascript">_writeMessage('minutes',"60");</script></option>
</select></div>
</div>

<div class="option_row">
<div class="option_name"><script type="text/javascript">_writeMessage('options_sound_alert_title');</script></div>
<div class="option_picker">
	<select id="sound-alert" onchange="markDirty();">
		<option value=""><script type="text/javascript">_writeMessage('options_sound_alert_none');</script></option>
		<option value="http://chrome-social-media-monitoring.googlecode.com/files/sound01.ogg"><script type="text/javascript">_writeMessage('options_sound_alert_value',"1");</script></option>
		<option value="http://chrome-social-media-monitoring.googlecode.com/files/sound02.ogg"><script type="text/javascript">_writeMessage('options_sound_alert_value',"2");</script></option>
	</select>
</div>
<button onclick="playSound();"><script type="text/javascript">_writeMessage('button_play');</script></button>
</div>

<div class="option_row">
	<div class="option_name"><script type="text/javascript">_writeMessage('options_probe_labels');</script></div>
	<div class="option_picker">
	<input type="checkbox" id="options_hide_probe_labels" name="options_hide_probe_labels" onchange="markDirty();"  value="1" /><script type="text/javascript">_writeMessage('hide');</script>
	</div>
</div>

<div class="option_row">
	<div class="option_name"><script type="text/javascript">_writeMessage('options_global_threshold_ratio');</script></div>
	<div class="option_picker">
	<input type="text" id="options_global_threshold_ratio" name="options_global_threshold_ratio" maxlength="4" onchange="markDirty();" onkeyup="markDirty();" /><span class="hint"><script type="text/javascript">_writeMessage('options_global_threshold_ratio_default_hint');</script></span>
	</div>
</div>

<div class="buttons">
	<button id="save_button" onclick="saveOptions();"><script type="text/javascript">_writeMessage('button_save');</script></button>
	<button id="reset_button" onclick="resetOptions();return false;"><script type="text/javascript">_writeMessage('button_reset');</script></button>
	<span id="save_status"><script type="text/javascript">_writeMessage('status_save');</script></span>
</div>

<div id="title_license" class="section-header first"><script type="text/javascript">_writeMessage('license_title');</script></div>
<div id="body_license"><script type="text/javascript">_writeMessage('license_body');</script></div>
</div>

<div class="footr"><script type="text/javascript">_writeMessage('footer_info');</script></div>

<script type="text/javascript"> 
	//var customDomainsTextbox;
	var saveButton;

	
	function _initOptionsPage() {
		saveButton = document.getElementById("save_button");
		if(bkg.settings.isFirstRun){
			markDirty();
		}else{
			markClean();
		}
		
	}

	function saveOptions() {
		markClean();

		save_options();
		return false;
	}
	
	function resetOptions() {
		 $('#refresh-interval').val("30");
		 $('#sound-alert').val("");
		 $("#options_global_threshold_ratio").val(3);
		 $("#options_hide_probe_labels").attr("checked", false);
			 		 
		 saveOptions();
		return false;
	}

	function markDirty() {
		saveButton.disabled = false;
	}

	function markClean() {
		saveButton.disabled = true;
	}
</script>
</body>
</html>